<template>
	<!-- 模拟微信聊天记录界面 -->
	<div class="chat-container">
		<!-- 顶部标题栏 -->
		<div class="header">
			<div class="user-info">
				<img :src="currentUser.avatar" class="avatar" alt="avatar" />
				<span class="username">{{ currentUser.name }}</span>
			</div>
		</div>

		<!-- 消息区域 -->
		<div class="message-list" ref="messageContainer">
			<div
				v-for="(message, index) in messages"
				:key="message.id"
				class="message-wrapper"
				:class="{ 'self-message': message.isSelf }"
			>
				<!-- 消息内容 -->
				<div class="message-content">
					<img
						v-if="!message.isSelf"
						:src="message.isSelf ? currentUser.avatar : targetUser.avatar"
						class="avatar"
						alt="avatar"
					/>
					<div class="bubble-container">
						<div class="bubble" :style="{ width: message.content.length * 22 + 'px' }">
							<div class="text">{{ message.content }}</div>
						</div>
					</div>

					<img v-if="message.isSelf" :src="currentUser.avatar" class="avatar" alt="avatar" />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, reactive } from 'vue'

	// 模拟数据
	const currentUser = reactive({
		id: 1,
		name: '我自己',
		avatar: new URL('@/assets/images/service_avatar.png', import.meta.url).href
	})

	const targetUser = reactive({
		id: 2,
		name: '好友',
		avatar: new URL('@/assets/images/customer_avatar.png', import.meta.url).href
	})

	const messages = ref([
		{
			id: 1,
			content: '你好呀！',
			timestamp: new Date().getTime() - 3600 * 1000,
			isSelf: false,
			status: 'sent'
		},
		{
			id: 2,
			content: '测试消息',
			timestamp: new Date().getTime() - 3600 * 1000,
			isSelf: true,
			status: 'sent'
		},
		{
			id: 5,
			content: '请问有什么需要帮助的吗！',
			timestamp: new Date().getTime() - 3600 * 1000,
			isSelf: false,
			status: 'sent'
		},
		{
			id: 4,
			content: '天气预报',
			timestamp: new Date().getTime() - 3600 * 1000,
			isSelf: true,
			status: 'sent'
		}
	])
	const messageContainer = ref(null)
</script>

<style scoped>
	/* 修改消息容器布局 */
	.message-wrapper {
		/* //display: flex; */
		margin: 10px 0;
	}

	.self-message {
		display: flex;
		justify-content: flex-end; /* 自己消息右对齐 */
	}

	.message-content {
		display: flex;
		align-items: flex-start;
		text-align: justify;
		max-width: 80%;
		gap: 8px;
	}
	.chat-container {
		border: 1px solid #ddd;
		display: flex;
		flex-direction: column;
	}

	.header {
		padding: 10px;
		border-bottom: 1px solid #eee;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 40px;
		height: 40px;
		border-radius: 5px;
		margin-right: 10px;
	}

	.message-list {
		flex: 1;
		overflow-y: auto;
		padding: 10px;
		background: #f3f3f3;
	}

	.message-wrapper.self {
		flex-direction: row-reverse;
	}
	/* 调整气泡容器宽度 */
	.bubble-container {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
	}

	/* 调整气泡样式 */
	.bubble {
		padding: 8px 12px;
		border-radius: 5px;
		background: white;
		position: relative;
	}

	.self-message .bubble {
		background: #95ec69;
	}

	/* 添加气泡小箭头 */
	.bubble::before {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		top: 12px;
	}

	.bubble .text {
		word-break: break-word;
	}

	textarea {
		flex: 1;
		height: 60px;
		padding: 8px;
		border: 1px solid #ddd;
		border-radius: 5px;
		resize: none;
	}

	button {
		padding: 8px 15px;
		background: #07c160;
		border: none;
		border-radius: 5px;
		color: white;
		cursor: pointer;
	}

	button:hover {
		background: #06ad56;
	}

	/* 对方消息箭头 */
	.message-wrapper:not(.self-message) .bubble::before {
		left: -6px;
		border-top: 6px solid transparent;
		border-bottom: 6px solid transparent;
		border-right: 6px solid white;
	}

	/* 自己消息箭头 */
	.self-message .bubble::before {
		right: -6px;
		border-top: 6px solid transparent;
		border-bottom: 6px solid transparent;
		border-left: 6px solid #95ec69;
	}
</style>
